<template>
  <div class="account-info">
    <div v-if="loading" class="loading">
      <n-spin size="small" />
      <span class="loading-text">加载中...</span>
    </div>

    <div v-else-if="error" class="error">
      <n-alert type="error" :title="error" />
      <n-button size="small" @click="refreshAccountInfo" class="retry-btn">
        重试
      </n-button>
    </div>

    <div v-else-if="accountInfo" class="account-details">
      <div class="account-header">
        <h4 class="member-name">{{ accountInfo.member_name }}</h4>
        <n-tag :type="getAccountTypeColor(accountInfo.account_type)" size="small">
          {{ getAccountTypeText(accountInfo.account_type) }}
        </n-tag>
      </div>

      <div class="account-body">
        <div class="info-item">
          <span class="label">微信群:</span>
          <span class="value">{{ accountInfo.group_name }}</span>
        </div>

        <div class="info-item">
          <span class="label">备款余额:</span>
          <span class="value" :class="getBalanceClass(accountInfo.balance)">
            ¥{{ formatNumber(accountInfo.balance) }}
          </span>
        </div>

        <div class="info-item">
          <span class="label">总授信:</span>
          <span class="value credit">¥{{ formatNumber(accountInfo.credit) }}</span>
        </div>
      </div>

      <div class="account-footer">
        <div class="cache-info">
          <!-- <n-tag size="tiny" :type="isCacheExpired ? 'warning' : 'success'">
            {{ isCacheExpired ? '已过期' : `${cacheRemainingTime}s` }}
          </n-tag> -->
        </div>

        <n-button size="tiny" @click="refreshAccountInfo" :loading="loading">
          刷新
        </n-button>
      </div>
    </div>

    <div v-else class="no-data">
      <span>暂无账户信息</span>
      <n-button size="small" @click="refreshAccountInfo">
        获取信息
      </n-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useAccount } from '@/composables/useAccount';

const {
  accountInfo,
  loading,
  error,
  isCacheExpired,
  cacheRemainingTime,
  refreshAccountInfo,
} = useAccount();

// 格式化数字
const formatNumber = (value: string | number): string => {
  const num = typeof value === 'string' ? parseFloat(value) : value;
  return new Intl.NumberFormat('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(num);
};

// 获取余额样式类
const getBalanceClass = (balance: string): string => {
  const num = parseFloat(balance);
  if (num > 0) return 'positive';
  if (num < 0) return 'negative';
  return 'zero';
};

// 获取账户类型颜色
const getAccountTypeColor = (type: string): string => {
  switch (type) {
    case 'customer': return 'info';
    case 'admin': return 'success';
    case 'agent': return 'warning';
    default: return 'default';
  }
};

// 获取账户类型文本
const getAccountTypeText = (type: string): string => {
  switch (type) {
    case 'customer': return '客户';
    case 'a1': return '一级代理';
    case 'a2': return '二级代理';
    default: return type;
  }
};
</script>

<style scoped>
.account-info {
  padding: 12px;
  border-radius: 6px;
  background: var(--n-color);
  border: 1px solid var(--n-border-color);
  min-width: 280px;
}

.loading {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 20px;
}

.loading-text {
  font-size: 12px;
  color: var(--n-text-color-2);
}

.error {
  text-align: center;
}

.retry-btn {
  margin-top: 8px;
}

.account-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.member-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--n-text-color-1);
}

.account-body {
  margin-bottom: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px;
}

.label {
  color: var(--n-text-color-2);
  font-weight: 500;
}

.value {
  color: var(--n-text-color-1);
  font-weight: 600;
}

.value.positive {
  color: #18a058;
}

.value.negative {
  color: #d03050;
}

.value.zero {
  color: var(--n-text-color-3);
}

.value.credit {
  color: #2080f0;
}

.account-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--n-divider-color);
}

.cache-info {
  font-size: 11px;
}

.no-data {
  text-align: center;
  padding: 20px;
  color: var(--n-text-color-3);
}

.no-data span {
  display: block;
  margin-bottom: 8px;
}
</style>